年前完工了做了半年的铁路后台管理系统，系统整体业务比较复杂，这也是我到公司从 0 到 1 的 一个完整系统实践，做这个系统过程中踩了不少坑，也学到了很多。

  做完这个系统没多久，紧接着又一个系统来了，没及时总结，惭愧哈！其实我们在做的后台管理系统大多数基础框架都一样，后台管理系统 主要的 是 角色权限管理 ， 按钮权限管理 和 菜单管理 ， 其它的业务主要围绕在这个基础之上进行扩展，最终 构成了 符合业务的后台管理系统.

 由于我司的项目都是采用 Vue 技术栈，那么该文章也是讲解 Vue 如何进行权限管理 进行讲解。

任何一个后台管理系统都是 首先从登录开始，登录后返回用户基本信息，以及token。

登录成功后同时要做很多事情，具体业务具体对待。后台管理系统 登录成功后会请求当前用户的菜单权限接口，来获取用户的可访问的路由(动态路由)，获取成功后， Vue Router 是不能直接使用的，必须得解析成符合 Vue Router 可识别的格式 .

登录成功后，本文通过 Vuex 来获取当前用户菜单和解析路由的。

store.dispatch("setMenuList");

封装好的解析后端返回来的路由，这块主要是为了在 Vuex 中使用。

到此为止，已经实现了 Vue 动态权限控制 ，别高兴的太早，哈哈，一刷新页面，页面就进入了 404 页面 。

因为存入 Vuex 中的数据，一刷新页面，就会清空，那么当然找不到当前路由，就进入 404 页面了 .

**一、 可以 将 静态和 动态 构成的完整路由 存放在 sessionStronge / localStronge 中，然后页面刷新时，通过在 全局入口文件 App.vue 的 生命周期 created 中 ，将 router = sessionStronge / localStronge 存入的完整的路由，页面在刷新时，它会重新加载完整的路由。 **

二、如果是使用Vuex来获取和解析用户菜单的话， 那么你可以在全局入口文件 App.vue 的 生命周期 created 中 ，再次执行 Vuex Action 来重新加载用户菜单

我这块直接在 App.vue 的 生命周期 created 中 , 再次执行了 Vuex 来进行加载和解析，没有做其它操作。 当然了，具体业务具体对待。